<ul class="vertical-menu-list">
<#list categories as category>
    <#if category_index == 3>
        <#break >
    </#if>
    <li class="<#if category_index gt 10> cat-link-orther </#if>">
        <#if category.child?? && category.child?size gt 0 >
            <a class="parent">
                <img class="icon-menu" alt="${category.description}" src="${category.icon}">${category.name}
            </a>
            <div class="vertical-dropdown-menu" style="width: 900px;">
                <div class="vertical-groups col-sm-12">
                    <#list category.child as childCate>
                        <div class="mega-group col-sm-4">
                            <h4 class="mega-group-header"><span>${childCate.name}</span></h4>
                                <#if childCate.child?? && childCate.child?size gt 0>
                                <ul class="group-link-default">
                                    <#list childCate as grandCate>
                                        <li><a href="#">${grandCate.name}</a></li>
                                        <#if grandCate_index == 9>
                                            <#break >
                                        </#if>
                                    </#list>
                                </ul>
                                </#if>
                        </div>
                        <#if childCate_index == 2>
                            <#break >
                        </#if>
                    </#list>
                    <#--<div class="mega-custom-html col-sm-12">-->
                        <#--<a href="#"><img src="/static/vendors/assets/data/banner-megamenu.jpg" alt="Banner"></a>-->
                    <#--</div>-->
                </div>
            </div>
        <#else>
            <a href="">
                <img class="icon-menu" alt="${category.description}" src="${category.icon}">${category.name}
            </a>
        </#if>
    </li>
</#list>
</ul>